<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:sec="http://www.springframework.org/security/tags">
    <h:head>
        <title>Temas</title>
        <h:outputStylesheet library="styles" name="main.css"/>
        <style type="text/css">
            .ui-growl {

                left:600px;
            }
            .ui-growl-item-container {
                font-size: 12px;

            }
        </style>
    </h:head>

    <h:body style="background-color: 2c3e54;">
        <p:growl sticky="true"/>
        <center>
            <p:layout style="min-width:400px;min-height:200px;max-width:1000px;" id="layout"> 
                <p:layoutUnit position="center">
                    <p:toolbar>
                        <p:toolbarGroup align="left">
                            <c:if test="${empty sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal}">
                                <h:outputLink value="registrarUsuario-flow" >
                                    <h:panelGrid columns="1">
                                        <table><tr> <td>
                                            <h:outputText value="#{msg.registrar_msg}" style="color: whitesmoke " />
                                            </td></tr></table>
                                    </h:panelGrid>
                                </h:outputLink>
                            </c:if>

                            <c:if test="${not empty sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal}">
                                <h:panelGrid columns="2">
                                    <p:column>
                                        <h:outputLink value="crearTema-flow"   >
                                            <c:if test="${ msg.btn_perfil == 'ES' }" >

                                                <div class="botontemaes">
                                                    <table class="botontemaes" style="height: 25px;width: 110px;"><tr> <td></td></tr></table>
                                                </div>
                                            </c:if>
                                            <c:if test="${ msg.btn_perfil == 'EN' }" >
                                                <div class="botontemaen">
                                                    <table class="botontemaen" style="height: 25px;width: 110px;"><tr> <td></td></tr></table>
                                                </div>
                                            </c:if>
                                        </h:outputLink>
                                    </p:column>
                                    <p:column>
                                        <h:outputLink value="editarPerfil-flow"   >
                                            <c:if test="${ msg.btn_perfil == 'ES' }" >

                                                <div class="botonperfiles">
                                                    <table class="botonperfiles" style="height: 25px;width: 88px;"><tr> <td></td></tr></table>
                                                </div>
                                            </c:if>

                                            <c:if test="${ msg.btn_perfil == 'EN' }" >
                                                <div class="botonperfilen">
                                                    <table class="botonperfilen" style="height: 25px;width: 88px;"><tr> <td></td></tr></table>
                                                </div>
                                            </c:if>
                                        </h:outputLink>     
                                    </p:column>                              
                                </h:panelGrid>
                            </c:if>
                        </p:toolbarGroup>

                        <p:toolbarGroup align="right">   
                            <h:panelGrid columns="2">
                                <c:if test="${not empty sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal}">
                                    <p:column  >
                                        <h:outputText value="#{msg.estas_conectado}" style="font-size:16px; color: whitesmoke" />  
                                        <h:outputText value=" ${sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal.username} " style="font-size:18px;   color: chartreuse; font-weight: bold;" /> 
                                    </p:column>
                                    <p:column>
                                        <h:outputLink value="logout-flow">                   
                                            <div class="botonONOFF">
                                                <table class="botonONOFF" style="height: 24px;width: 24px;">
                                                    <tr>
                                                        <td>    
                                                        </td>                                                        
                                                    </tr>
                                                </table>
                                            </div>
                                        </h:outputLink>
                                    </p:column>
                                </c:if>
                            </h:panelGrid>                    
                            <c:if test="${empty sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal}">  
                                <h:form style="height: 15px;">
                                    <h:outputLabel for="usernames" value="#{msg.usuario}" style="font-size:12px;" />                     
                                    <p:inputText id="usernames" value="#{usuarioController.usuario.username}" size="12" 
                                                 style="height: 25px;font-size:  12px;" />
                                    <h:outputLabel for="passwords" value="#{msg.password}" style="font-size:  12px;" />                   
                                    <p:inputText id="passwords" type="password" value="#{usuarioController.usuario.password}" 
                                                 size="12" style="height: 25px;font-size:12px;"/>           
                                    <p:commandButton  value="#{msg.conectar}" icon="ui-icon-arrowreturnthick-1-e" ajax="false" 
                                                      style="height: 30px;width: 100px;font-size: 12px" action="irLoginUsuario"  />  
                                </h:form>
                            </c:if>
                        </p:toolbarGroup> 
                    </p:toolbar>

                    <p:dataTable id="temas" value="#{tema}" var="tema" emptyMessage="#{msg.no_temas}">   
                        <p:column style="width: 200px;">
                            <f:facet name="header">
                                <h:outputText value="#{msg.perfil}"/>
                            </f:facet> 
                            <h:panelGrid style="background-color: activecaption; width: 125px; height: 125px">
                                <p:graphicImage height="125" width="125"  url="#{tema.avatar}"/>
                            </h:panelGrid>
                            <br/>
                            <h:outputLabel value="#{tema.autor}" escape="false" style="height: 30px;width: 100px;font-size: 15px;font-weight: bold"/>
                            <br/>
                            <h:outputLabel value="#{tema.fecha}" escape="false" style="height: 30px;width: 100px;font-size: 10px;"/>
                        </p:column>
                        <p:column style="alignment-adjust: baseline">
                            <f:facet name="header">
                                <h:outputText  value="#{tema.titulo}" />
                            </f:facet> 
                            <h:outputFormat  value="#{tema.content}" escape="false" style="height: 30px;width: 100px;font-size: 14px;alignment-adjust: baseline" />
                            <p:separator/>
                            <c:if test="${not empty sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal and 
                                          sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal.username eq tema.autor}">
                                <h:form>
                                    <p:commandButton onclick="dlg2.show()" icon="ui-icon-pencil" type="button" style="width: 24px;height: 24px;"  title="#{msg.editar_tema}"/>
                                </h:form>                   
                                <p:dialog id="Dialog" header="#{msg.editar_tema}" widgetVar="dlg2"  resizable="false" style="text-align: center">  
                                    <h:form>
                                        <h:outputLabel for="titleTema" value="#{msg.titulo}:" />                 
                                        <p:inputText id="titleTema" value="#{temaController.tema2.titulo}"/>
                                        <p:editor id="editcomentaTema" value="#{temaController.tema2.content}" />                
                                        <p:commandLink  value="#{msg.editar_tema}" ajax="false" action="irAEditarTema" > <!--HAY QUE INTERNACIONALIZAR ESTOS BOTONES-->
                                            <f:setPropertyActionListener value="#{tema}" target="#{temaController.tema}" />
                                        </p:commandLink>
                                    </h:form>
                                </p:dialog> 
                                <h:form>
                                    <p:commandLink value="#{msg.borrar_tema2}" action="borrarTema" ajax="false" >
                                        <f:setPropertyActionListener value="#{tema}" target="#{temaController.tema}" />
                                    </p:commandLink>          
                                </h:form>
                            </c:if>
                        </p:column>
                    </p:dataTable>
                    
                    <p:dataTable id="comentarios" value="#{coments}"
                                 var="coment" emptyMessage="#{msg.no_temas}">
                        
                        <p:column style="width: 175px">
                            <f:facet name="header">
                                <h:outputText value="#{msg.autor}"/>
                            </f:facet > 
                            <h:panelGrid style="background-color: activecaption;width: 125px; height: 125px">
                                <p:graphicImage height="125" width="125"  url="#{coment.avatar}"/>
                            </h:panelGrid> 
                            <br/>
                            <h:outputLabel value="#{coment.autor}" escape="false" style="font-weight: bold"/>
                            <br/>
                            Comentarios: 
                            <h:outputLabel value="#{coment.autorComents}" escape="false" style="font-weight: bold"></h:outputLabel>
                            <br/>
                            <h:outputLabel value="#{coment.fecha}" escape="false" />
                        </p:column>

                        <p:column >
                            <f:facet name="header">
                                <h:outputText  value="POST"/>
                            </f:facet>                           

                            <p:toolbar>
                                <p:toolbarGroup align="center">
                                    <h:outputLabel value="#{coment.titulo}" escape="false" /> 
                                </p:toolbarGroup>
                            </p:toolbar>
                            <br/>
                            <h:outputFormat value="#{coment.content}" escape="false"/>
                            <br/><br/>
                            <h:form rendered="#{sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal != null and
                                                sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal.username == coment.autor}">
                                <p:separator/>
                                <p:commandLink value="#{msg.borrar_comentario}" action="borrarComentario" ajax="false">                                    
                                    <f:setPropertyActionListener value="#{coment}" target="#{comentarioController.comentario}" />
                                </p:commandLink>                               

                            </h:form>
                            <h:form rendered="#{sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal != null and
                                                sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal.username == coment.autor}">
                                <p:separator/>
                                <p:commandLink value="#{msg.edit_coment}" action="editarComentario" ajax="false">                                    
                                    <f:setPropertyActionListener value="#{coment}" target="#{comentarioController.comentario}" />
                                </p:commandLink>                               

                            </h:form>
                        </p:column>               

                    </p:dataTable>

                    <p:toolbar>
                        <p:toolbarGroup align="left">


                            <c:if test="${not empty sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal}">
                                <h:panelGrid columns="1">
                                    <p:column >

                                        <h:outputLink value="crearTema-flow"   >
                                            <c:if test="${ msg.btn_perfil == 'ES' }" >
                                                <div class="botontemaes">
                                                    <table class="botontemaes" style="height: 25px;width: 110px;"><tr> <td></td></tr></table>
                                                </div>
                                            </c:if>

                                            <c:if test="${ msg.btn_perfil == 'EN' }" >
                                                <div class="botontemaen">
                                                    <table class="botontemaen" style="height: 25px;width: 110px;"><tr> <td></td></tr></table>
                                                </div>
                                            </c:if>
                                        </h:outputLink>
                                    </p:column>
                                </h:panelGrid>
                            </c:if>
                        </p:toolbarGroup>

                    </p:toolbar>
                    <p:separator/>
                    <c:if test="${not empty sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal}">
                        <h:form prependId="false" id="temasForm">
                            <h:outputLabel for="tituloComentario" value="#{msg.titulo}:" />                 
                            <p:inputText id="tituloComentario" value="#{comentarioController.comentario.titulo}"/>
                            <br/><br/>
                            <h:outputLabel for="comentarioTema" /> 
                            <p:editor id="comentarioTema" value="#{comentarioController.comentario.content}"/>                
                            <p:commandButton iconPos="right" value="#{msg.crear_comentario}" ajax="false" action="irACrearComentario" />
                        </h:form>
                    </c:if>

                    <center><h:outputLink value="/index.html">#{msg.ir_a_inicio}</h:outputLink></center>

                </p:layoutUnit>
            </p:layout>
        </center>
    </h:body>
</html>
